<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>领料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style type="text/css">
        body {
            background-color: #ffffff;
        }
       
    </style>

</head>
<body>
<div class="layui-form layuimini-form">

    <div class="layui-form-item">
        <label class="layui-form-label">父菜单名称</label>
        <div class="layui-input-block">
            <select name="pid" class="layui-input" disabled="" id="pid">
               
            </select>
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">菜单名称</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="title" lay-verify="required" placeholder="请输入菜单名称">
        </div>
    </div>

    <!-- <div class="layui-form-item">
        <label class="layui-form-label">菜单背景色</label>
        <div class="layui-input-block">
            <input type="hidden" class="layui-input" name="bgColor" >
            <div class="color-box"></div>
        </div>
    </div> -->

    <div class="layui-form-item">
        <label class="layui-form-label">菜单地址</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="href"  placeholder="请输入菜单地址">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">菜单权限</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="permission"  placeholder="菜单权限">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">菜单图标</label>
        <div class="layui-input-block">
            <input type="hidden" class="layui-input" name="icon" id="iconValue" value="" placeholder="请选择菜单图标">
            <div class="layui-input-inline" style="width: 30px;line-height: 30px;">
                <div id="iconPic" style="float: left;margin-top: 8px;">
                    <i class="fa fa-adjust" style="font-size: 25px"></i>
                </div>
            </div>
            <div class="layui-input-inline" style="width: 100px;">
                <a class="layui-btn layui-btn-normal" id="selectIcon">我来选择一个图标</a>
            </div>
        </div>
    </div>

    <!-- <div class="layui-form-item">
        <label class="layui-form-label">左侧菜单栏是否显示</label>
        <div class="layui-input-block">
            <input type="checkbox" name="isShow" lay-skin="switch"    lay-text="是|否" checked>
        </div>
    </div> -->

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">立即提交</button>
        </div>
    </div>

</div>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/common/constant.js"></script>

<script>
    layui.use(['form','laydate','layer'], function () {
        var laydate = layui.laydate;
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;

        // //日期选择
        // //常规用法
        // laydate.render({
        //     elem: '#test1'
        // });
        
         //选择图标
         $("#selectIcon").on("click",function () {
            iconShow =layer.open({
                type: 2,
                title: '选择图标',
                shadeClose: true,
                content: '/page/icon/icon.html'
            });
            layer.full(iconShow);
        });

        window.success = function(v){
            if(v != null){
                var icon = '<i class="' + v + '" style="font-size: 25px"></i>';
                $("#iconPic").html(icon);
                $("#iconValue").val(v);
            }
        }

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            $.post(getRootPath()+'sysmenu/add',data.field,function(data){
                var index = layer.alert(data.message, {
                    title: '提示信息',
                    btn: ['继续添加', '关闭'],
                    yes: function (index, layero) {
                        layer.close(layer.index); //点击确定之后执行yes函数,关闭弹出层
                        location.reload();
                    },
                    btn2: function(index,layero){
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                    }
                })
            },'json')
            return false;
        });

        /* 回显当前的物料信息 */
        $(function(){
            var url = location.search;
            var i = url.indexOf("=");
            var id = url.substring(i+1);
            $.ajax({
                url:getRootPath()+'sysmenu/echo',
                type:"GET",
                data:{
                  id:id  
                },
                dataType:"json",
                success:function(data){
                    if(data.code==200){
                        var menu = data.data;
                        var option = $("<option>").val(menu.id).html(menu.title);
                        $("#pid").append(option)
                        // $("input[name='matId']").val(id)
                    /*重新渲染页面*/
                    form.render();
                    }
                }
            })
        })
    });

</script>
</body>
</html>